﻿
<div id="test">

    <div>
        <h3>职位信息</h3>

        <div class="btn-group" style="float:right;">
            <button class="btn btn-secondary" data-toggle="modal" data-target="#myModal">新增职位</button>
            <button type="button" class="btn btn-secondary" onclick="location.href='/Personnel/HomeIndex'">员工管理</button>
            <button type="button" class="btn btn-secondary" onclick="location.href='/Personnel/Departments'">部门管理</button>
        </div>
        <br />
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        新增职位
                    </h4>
                </div>
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="name">职位名称</label>
                            <input type="text" class="form-control" id="name" v-model="info.name"
                                   placeholder="请输入名称">
                        </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">
                        ×
                    </button>
                    <button type="button" class="btn btn-primary"
                            data-dismiss="modal" v-on:click="add">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <table class="table table-hover">
        <tr style="background-color:cadetblue">
            <td>编号</td>
            <td>职务</td>

        </tr>
        <tr v-for="(item,index) in data">
            <td>
                {{index}}
            </td>
            <td>{{item.position}}</td>

        </tr>
    </table>
</div>
<script src="~/js/qs.min.js"></script>
<script>
    new Vue({
        el: '#test',
        data() {
            return {
                data: {},
                info: {
                    name: "",
                },
                dpmdata: {}
                }
        },
        mounted() {
            axios
                .get('/Personnel/Positionshow')
                .then(response => (this.data = response.data))
                .catch(function (error) {
                    console.log(error);
                })
        },
        methods: {
            add: function () {
                var obj = {
                    Position: this.info.name
                };
                axios
                    .post("/Personnel/Addps", window.Qs.stringify(obj))
                    .then(res => {
                        alert("添加成功");
                        location.href = '/Personnel/Positions'

                    })
                    .catch(function (error) {
                        alert(error);
                    });

            }
        }

    })
</script>
